<template>
	<view class="brand-list-container">
		<!-- 左侧分类栏 -->
		<view class="left-category">
			<view :class="['category-item', { active: StarRating === ''}]" @click="StarRating = '' ">
				全部
			</view>
			<view v-for="(category, index) in categories" :key="index"
				:class="['category-item', { active: StarRating === category.id }]" @click="StarRating = category.id ">
				{{ category.displayName }}
			</view>
		</view>

		<!-- 右侧品牌列表 -->
		<scroll-view scroll-y class="scroll-view">
			<view class="right-brands">
				<view class="brand-grid">
					<view  class="brand-item" @click="toggleBrand({name:'',id:''})">
						<view class="brand-info">
							<view class="brand-name">全部</view>
						</view>
					</view><view v-for="(brand, index) in brandData" :key="index" class="brand-item" @click="toggleBrand(brand)">
						<view class="brand-info">
							<view class="brand-name">{{ brand.name }}</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>

	</view>
</template>

<script setup lang="ts">
	import { ref, computed, watch } from 'vue'
	import { getFiterData } from '@/api/home'
	import { onShow } from '@dcloudio/uni-app';
	const query = defineProps<{
		type : string,
		params:string
	}>()
	const categories = ref([])
	const StarRating = ref('')
	const Brand = ref(0)
	const brandData = ref([])

	onShow(() => {
		initData()
	})
	const initData = async () => {
		const res = await getFiterData()
		console.log(res)
		brandData.value = res.data.hotelBrands
		categories.value = res.data.starRatings
		// StarRating.value = res.data.starRatings[0].id
	}


	// 切换单个品牌选择状态
	const toggleBrand = (brand:any) => {
		Brand.value=brand.id
		const Params = uni.getStorageSync('homeParams')
		uni.setStorageSync('homeParams', {
			...Params,
			Brand:Brand.value,
			StarRating:StarRating.value,
			BrandName:brand.name
		})
		if (query.type) {
			const params =JSON.parse(query.params)
			params.StarRating=StarRating.value
			params.BrandName= brand.name
			params.Brand= brand.id
			console.log(params)
			uni.navigateTo({
				url:'/pages/hotel/list?params='+JSON.stringify(params)
			})
		} else {
			uni.switchTab({
				url: '/pages/home/index'
			})
		}
		
		// uni.switchTab({
		// 	url: '/pages/home/index'
		// })
	}
</script>

<style scoped>
	.brand-list-container {
		display: flex;
		height: 100vh;
		background-color: #f5f5f5;
	}

	/* 左侧分类样式 */
	.left-category {
		width: 200rpx;
		background-color: #f0f0f0;
		overflow-y: auto;
	}

	.category-item {
		padding: 30rpx 0;
		text-align: center;
		font-size: 30rpx;
		border-bottom: 1rpx solid #e5e5e5;
	}

	.category-item.active {
		background-color: #ffffff;
		color: #007aff;
		position: relative;
	}

	.category-item.active::before {
		content: '';
		position: absolute;
		left: 0;
		top: 0;
		height: 100%;
		width: 6rpx;
		background-color: #007aff;
	}

	/* 右侧品牌列表样式 */
	.right-brands {
		flex: 1;
		padding: 20rpx;
		background-color: #ffffff;
		overflow-y: auto;
	}

	.all-select {
		padding: 20rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.radio-label {
		display: flex;
		align-items: center;
		font-size: 32rpx;
	}

	.radio-label radio {
		transform: scale(0.8);
		margin-right: 15rpx;
	}

	/* 品牌网格布局 */
	.brand-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 15rpx;
		padding: 20rpx 10rpx;
	}

	.brand-item {
		/* padding: 20rpx; */
	}

	.brand-label {
		display: flex;
		align-items: center;
	}

	.brand-label radio {
		transform: scale(0.8);
		margin-right: 15rpx;
	}

	.brand-info {
		flex: 1;
	}

	.brand-name {
		color: #333;
		background: #f7f8fa;
		padding: 10px;
	}

	.brand-english {
		font-size: 24rpx;
		color: #999;
		margin-top: 5rpx;
	}
</style>